<template>
	<view class="logistics_box">
		<view class="liss_top">
			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg" class="icon" mode=""></image>
			<view class="title_box">
				<view class="title">
					中通快递
				</view>
				<OrderMsg title='订单编号' value='454655354644467665532' :isColpy="true"></OrderMsg>
			</view>
		</view>
		<u-gap  height="14" bg-color="#ECECEC"></u-gap>
		<u-read-more color='#000000' :toggle="true" close-text='展开' open-text='收起' textIndent='0' show-height='800'>
			<view class="time_line_box">
				<u-time-line>
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #FF9FB2;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="star-fill" color="#FF0E3D" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">【阿赫县】快件离开【潮汕中心】已发往【奈何桥
									中转站】</view>

								<view class="u-order-time">2019-05-08 12:12</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item v-for="(item,index) in 10" :key='index'>
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view>
								<view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
								<view class="u-order-time">2019-12-06 22:30</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-read-more>
		<u-gap margin-bottom="10" height="14" bg-color="#ECECEC"></u-gap>
		<ZYTitle title='精选'></ZYTitle>
		<view class="item_row">
			<GoodsItemRow v-for="(item,index) in 10" :key='index'></GoodsItemRow>
		</view>
	</view>
</template>

<script>
	import OrderMsg from '../order/components/OrderMsg.vue'
	import GoodsItemRow from '@/components/ZY-Goods-item-row/ZY-Goods-item.vue'
	import ZYTitle from '@/components/ZY-title/ZY-title.vue'
	export default {
		components: {
			OrderMsg,
			GoodsItemRow,
			ZYTitle,
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.item_row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.time_line_box {
		padding: 24rpx;
		padding-left: 40rpx;
	}

	.u-node {
		width: 34rpx;
		height: 34rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: $u-type-primary;
		font-size: 28rpx;
	}



	.u-order-time {
		color: #989898;
		font-size: 22rpx;
	}

	.logistics_box {
		.liss_top {
			display: flex;
			align-items: center;
			padding: 24rpx;

			.title_box {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.icon {
				margin-right: 17rpx;
				width: 88rpx;
				height: 88rpx;
				border-radius: 12rpx;

				.title {
					color: $u-type-primary;
					font-size: 28rpx;
					margin-bottom: 11rpx;
				}
			}
		}
	}
</style>
